<template>
	<view class="complaint-add">
		<uni-forms :modelValue="formData" class="form-s">
			<uni-forms-item label="选择房间" :label-width="150" required>
				<view class="check-box">
					<input type="text" v-model="formData.room" @click="show = true" disabled placeholder="请选择房间"/>
					<image :src="$imgUrl + '/personal/next-icon.png'" class="check-icon" mode=""></image>
				</view>
			</uni-forms-item>
			<uni-forms-item label="联系电话" :label-width="150">
				<input type="number" maxlength="11" v-model="formData.phone" placeholder="请输入联系电话" />
			</uni-forms-item>
			<uni-forms-item class="uni-sug" required>
				<view class="uni-sug-label">反馈内容:</view>
				<view class="uni-sug-t">
					<textarea class="uni-sug-textarea" maxlength="300" v-model="formData.content" placeholder="请填写反馈内容"></textarea>
					<span>{{formData.content&&formData.content.length || 0}}/300</span>
				</view>
			</uni-forms-item>
			<uni-forms-item class="uni-sug" required>
				<view class="uni-sug-label">附件:<span>（仅支持图片JPEG、PNG格式上传，小于5M）</span></view>
				<view>
					<uni-file-picker v-model="formData.imageValue"  limit="3"></uni-file-picker>
				</view>
			</uni-forms-item>
		</uni-forms>
	</view>
	<u-picker :show="show" :columns="columns" @confirm="confirm"></u-picker>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue"
const formData = reactive({
	room:'',
	phone:'',
	content:'',
	imageValue:[]
})
const show = ref(false)
const columns = reactive([
	['南舒房东辰里7栋1单元24咯iu3637',
	'南舒房东辰里8栋1单元24咯iu3637',
	'南舒房东辰里9单元24咯iu3637']
])

//弹窗确认
const confirm = (e) => {
	show.value = false
	// formData.room = e.value[0]
}

</script>
<style>
	page{
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.complaint-add {

		.uni-forms-item{
			border-bottom: 2rpx solid #f5f5f5;
			background: #fff;
			align-items: center;
			padding: 20rpx 32rpx;
			margin: 0;
			uni-input{
				font-size: 28rpx;
			}
			::v-deep.uni-input-wrapper{
				text-align: right;
			}
			::v-deep.uni-forms-item__label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
			}
			.check-icon{
				width: 16rpx;
				height: 28rpx;
				margin-left: 20rpx;
			}
			.check-box{
				flex: 1;
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: right;
			}
		}
		.uni-sug{
			margin-bottom: 0;
			::v-deep .uni-forms-item__label{
				position: absolute;
				top:20rpx
			}
			.uni-sug-label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
				padding: 0 0 20rpx 20rpx;
				&>span{
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
			.uni-sug-textarea{
				width: 638rpx;
				height: 258rpx;
				font-size: 28rpx;
				padding: 24rpx 24rpx 40rpx 24rpx;
				background: rgba(245, 245, 245, 1);
			}
		}
		.uni-sug-t{
			width: 686rpx;
			height: 316rpx;
			font-size: 28rpx;
			position: relative;
			&>span{
				position: absolute;
				right: 20rpx;
				bottom: 5rpx;
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}
		.submit-btn{
			margin: 94rpx 32rpx 40rpx 32rpx;
			border-radius: 200rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			border-radius: 200rpx;
			height: 84rpx;
		}
	}
</style>
